<template>
  <div class="main">
    <!-- 头部组件 -->
    <comp-det-heater>
      <template v-slot:left>
        <!-- <router-link to="/home/found"> -->
          <div class="left" @click="$router.go(-1)"><van-icon name="arrow-left" /></div>
        <!-- </router-link> -->
      </template>
      <template v-slot:center>
        <span>笔记详情</span>
      </template>
      <template v-slot:right>
        <div class="iconfont" @click="share">&#xe603;</div>
      </template>
    </comp-det-heater>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in users[i].detailsImg" :key="item">
        <img :src="item" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 用户信息 -->
    <div class="information">
      <div class="photo">
        <img :src="users[i].head" alt="" />
      </div>
      <div class="name">{{ users[i].name }}</div>
    </div>
    <!-- 笔记内容 -->
    <div class="news">
      <div class="title">{{ users[i].title }}</div>
      <div class="details">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ users[i].details }}
      </div>
      <div class="model">{{ users[i].model }}</div>
    </div>
    <!-- 评论 -->
    <div class="commentList">
      <div class="title">{{ commentNum }}</div>
      <ul>
        <li v-for="(item, index) in users[i].comment" :key="index">
          <div class="user">
            <img :src="item.head" alt="" />
            <span class="name">{{ item.name }}</span>
            <span class="time">{{ item.time }}</span>
          </div>
          <div class="comment">{{ item.content }}</div>
        </li>
      </ul>
    </div>
    <div class="box" v-show="show" @click="click"></div>
    <transition
      :duration="{ enter: 800, leave: 500 }"
      entter-class="animate__animated animate__fadeInUp"
      enter-to-class="animate__animated animate__fadeInUp"
      leave-class="animate__animated animate__fadeOutDown"
      leave-to-class="animate__animated animate__fadeOutDown"
    >
      <div class="inputBox" v-show="show">
        <van-cell-group class="inputContent">
          <van-field
            v-model="message"
            rows="4"
            autosize
            label="评论"
            type="textarea"
            maxlength="50"
            placeholder="请输入评论内容"
            show-word-limit
          />
        </van-cell-group>
        <div class="btn" @click="publish">发表</div>
      </div>
    </transition>
    <!-- 底部框 -->
    <div class="bottom">
      <input type="text" v-model="message" placeholder="说点什么" @click="click" />
      <div
        class="iconfont fabulous"
        @click="like"
        :class="users[i].isLike == true ? 'active' : ''"
      >
        &#xe604;<span>{{ users[i].fabulous }}</span>
      </div>
      <div
        class="iconfont collection"
        @click="collect"
        :class="users[i].isCollect == true ? 'active' : ''"
      >
        &#xe605;<span>{{ users[i].collection }}</span>
      </div>
      <div class="iconfont comment">&#xe711;<span>{{ users[i].comment.length }}</span></div>
    </div>
    <!-- 分享 -->
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
    <Qrcode v-if="qcShow" :sid="$route.fullPath" :text="users[i].title"></Qrcode>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import Qrcode from "@/components/comp-qrcode.vue";
import CompDetHeater from "../components/comp-detHeater.vue";
export default {
  data() {
    return {
      i: 0,
      isCollect: false,
      isLike: false,
      showShare: false,
      qcShow:false,
      t:null,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
      show: false,
      message: "",
      time: "",
    };
  },
  computed: {
    ...mapState(["users",'token',"mine"]),
    // 计算评论数
    commentNum() {
      let num = 0;
      let str = "暂无评论";
      for (let i = 0; i < this.users[this.i].comment.length; i++) {
        num++;
      }
      if (num == 0) {
        num = str;
        return num;
      } else {
        return "共" + num + "条评论";
      }
    },
  },
  methods: {
    ...mapMutations(['setNoteLike','setNoteCollect']),
    // 点赞
    like() {
      if(this.token){
        this.$store.commit('setNoteLike',{i:this.i,isLike:!this.users[this.i].isLike})
      }else{
        this.$router.push('/login')
      }
    },
    // 收藏
    collect() {
      if(this.token){
        this.$store.commit('setNoteCollect',{i:this.i,isCollect:!this.users[this.i].isCollect})
      }else{
        this.$router.push('/login')
      }

    },
    // 分享
    share() {
      this.showShare = true;
    },
    click() {
      if(this.token){
        this.show = !this.show;
      }else{
        this.$router.push('/login')
      }
    },
    // 获取时间戳
    getTime() {
      let date = new Date();
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      let d = date.getDate();
      m = m > 10 ? m : "0" + m;
      d = d > 10 ? d : "0" + d;
      this.time = `${y}-${m}-${d}`;
    },
    // 发表评论
    publish() {
        if (this.message.length == 0) {
          alert("内容不能为空！");
        } else {
          let obj = {};
          this.getTime();
          obj.name = this.mine.name;
          obj.head = this.mine.url;
          obj.content = this.message;
          obj.time = this.time;
          this.users[this.i].comment.push(obj);
          this.show = false;
        }
        this.message = "";
    },
    // 生成二维码
    onSelect(option){
      this.t = null;
      if(option.name=='二维码'){
        this.qcShow = true
      }
      this.showShare = false
      this.t = setTimeout(()=>{
        this.qcShow = false
      },5000)
    }
  },
  components: {
    CompDetHeater,
    Qrcode
  },
  mounted() {
    this.i = this.$route.query.i;
    this.isCollect = this.$store.state.users[this.i].isCollect;
    this.isLike = this.$store.state.users[this.i].isLike;
  },
};
</script>

<style scoped lang="scss">
.main {
  padding-top: 60px;
  padding-bottom: 60px;
  .my-swipe .van-swipe-item {
    width: 100%;
    height: 500px;
    text-align: center;
    img {
      width: 100%;
      height: 500px;
    }
  }
  .information {
    margin-top: 10px;
    padding: 0 10px;
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    display: flex;
    .photo {
      flex-basis: 20%;
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }
    .name {
      flex-basis: 60%;
      font-size: 16px;
      line-height: 50px;
    }
    .follow {
      height: 30px;
      line-height: 30px;
      margin-top: 10px;
      border: 1px solid red;
      color: red;
      text-align: center;
      flex-basis: 20%;
      border-radius: 20px;
      font-size: 16px;
    }
  }
  .news {
    padding: 5px 15px;
    box-sizing: border-box;
    width: 100%;
    .title {
      width: 100%;
      font-size: 18px;
      font-weight: 600;
      padding: 10px 0;
    }
    .details {
      font-size: 18px;
    }
    .model {
      padding-bottom: 10px;
      box-sizing: border-box;
      width: 100%;
      text-align: left;
      font-size: 14px;
      color: rgb(75, 138, 255);
      margin-top: 10px;

    }
  }
  .commentList {
    border-top: 1px solid #ccc;
    width: 100%;
    background: #fafafa;
    padding: 0 10px;
    box-sizing: border-box;
    .title {
      width: 100%;
      height: 50px;
      line-height: 50px;
      font-size: 18px;
    }
    ul {
      width: 100%;
      display: flex;
      flex-direction: column;
      li {
        width: 100%;
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 10px;
        box-shadow: 2px 2px 4px #ccc;
        .user {
          width: 100%;
          height: 50px;
          display: flex;
          padding: 0 10px;
          box-sizing: border-box;
          img {
            display: block;
            margin-top: 7.5px;
            margin-right: 5px;
            width: 35px;
            height: 35px;
            // border-radius: 50%;
          }
          span {
            color: rgb(105, 105, 105);
            line-height: 50px;
            font-size: 14px;
          }
          .name {
            flex-basis: 70%;
          }
          .time {
            flex-basis: 30%;
          }
        }
        .comment {
          width: 100%;
          // height: 100px;
          font-size: 16px;
          padding: 10px;
          box-sizing: border-box;
        }
      }
    }
  }
  .inputBox {
    z-index: 3;
    width: 100%;
    height: 330px;
    background: rgb(238, 238, 238);
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 40px 10px;
    box-sizing: border-box;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    .btn {
      width: 150px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      margin: 20px auto;
      background: #e93f48;
      font-size: 20px;
      color: #fff;
      border-radius: 20px;
    }
  }
  .box {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.2);
  }
  .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    padding: 0 10px;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
    background: #fff;
    display: flex;
    input[type="text"] {
      display: block;
      flex-basis: 80%;
      width: 60%;
      height: 30px;
      margin-top: 15px;
      border-radius: 20px;
      border: none;
      font-size: 14px;
      background: #f6f6f6;
      padding: 0 0 0 30px;
      box-sizing: border-box;
      outline: none;
      margin-right: 10px;
    }
    .iconfont {
      flex-basis: 20%;
      height: 60px;
      font-size: 28px;
      display: flex;
      margin-right: 5px;
      align-items: center;
      span {
        height: 60px;
        line-height: 60px;
        font-size: 12px;
        // margin-left: 6px;
        display: inline-block;
      }
    }
    .active {
      color: red;
    }
  }
  .qrcode{
    position: sticky;
    bottom: 100px;
  }
}
</style>